<template>
	<view class="planItem" >
	 <uni-icons v-if="select" class="icon-select" :type="isActive?'circle-filled':'circle'" :color="isActive?'#02B1AA':'#E6E6E6'" size="20"></uni-icons>
	 <view class="planImg">
		 <image :src="planInfo.showImg" mode="scaleToFill"></image>
	 </view>
	 <view class="plan-info" :class="select?'plan-info-w':''">
		<view class="title ellipsis">{{planInfo.menuName}}</view>
		<!-- <view class="info">{{planInfo.content?planInfo.content:planInfo.describe}}</view> -->
		<view class="info" v-if='planInfo.describe' >
			{{planInfo.describe}}
	    </view>
		<view class="plan-price">
		  <view class="price">
			  <view class="now"><text>￥</text>{{planInfo.cost}}</view>
			  <view class="old">￥{{planInfo.cost*1.5}}</view>
		  </view>
		  <view class="car-info ellipsis">适用车型：{{planInfo.cartType}}</view>
		</view>
		<button v-if="isCx" class="cxBtn" @click="$emit('again')" type="default">重选</button>
	 </view>
	</view>
</template>

<script>
	export default {
		name:"plan-item",
		props:{
			planInfo:{
				type:Object,
				default:() => {
					return {}
				}
			},
			select:{
				type:Boolean,
				default:false
			},
			isCx:{
				type:Boolean,
				default:false
			},
			isActive:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
 .planItem{
 	width: 100%;
 	display: flex;
 	font-size: 24rpx;
	justify-content: flex-start;
	align-items: center;
	.icon-select{
		width: 40rpx;
		text-align: center;
		margin-left: 20rpx;
	}
 	.planImg{
 		image{
 		  width: 200rpx;
 		  height: 200rpx;
 		  padding: 30rpx;
 		}
 	 
 	}
 	.plan-info{
		width: calc(100% - 280rpx);
		position: relative;
		.cxBtn{
		  position: absolute;
		  top: -15rpx;
		  right: -10rpx;
		  width: 144rpx;
		  height: 64rpx;
		  color: #fff;
		  background: #02B1AA;
		  font-size: 28rpx;
		}
 		.title{
 			color: #2A2B2B;
 			font-size: 36rpx;
 			line-height: 50rpx;
 			font-weight: 800;
 			// margin-top: 40rpx;
 			width: 90%
 		}
 		.info{
 			color: #AEB3B3;
 			height: 105rpx;
 			line-height: 35rpx;
 			overflow: hidden;
			width: 98%;
 		}
 		.plan-price{
 			display: flex;
 			justify-content: space-between;
			width: 98%;
			margin-top: 8rpx;
			margin-bottom: 10rpx;
 			.price{
 				display: flex;
 				justify-content: flex-start;
 				align-items: center;
 			}
 			.price .now{
 				color: #F96501;
 				font-size: 36rpx;
 				margin-right: 10rpx;
 				text{
 					font-size: 22rpx;
 				}
 			}
 			.price .old{
 				color: #999999;
 				text-decoration-line: line-through;
 			}
 
 		}
 		.car-info{
 			border: 1px solid #02B1AA;
 			color: #02B1AA;
 			background-color: rgba(2, 177, 170, 0.1);
 			border-radius: 10rpx;
 			padding: 6rpx 10rpx;
			max-width: 200rpx;
 		}
 	}
	.plan-info-w{
		width: calc(100% - 340rpx);
	}
 }
</style>